<!DOCTYPE html>
<html>
<head>
<title>HtmlFormatTest.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

</head>
<script>
	function demo1() {
		document.write("World");
	}
</script>
<script>
	document.write("World");
</script>
<script>
	function demo2() {
		var obj1 = document.getElementById("pid");
		obj1.innerHTML = "World";
	}
	function demo3() {
		document.getElementsByTagName("h1").innerHTML = "世界";//寻找到相同标签元素中的第一个
	}
</script>
<script>
	function demo4() {
		var obj1 = document.getElementById("aid");
		obj1.href = "www.jikexueyuan.com";
	}function demo5() {
		var obj1 = document.getElementById("imgid");
		obj1.src = "../images/21.jpg";
	}
</script>
<body>
	1.改变HTML输出流:演示-------
	<br />
	<p>Hello</p>
	注意:绝对不要在文档加载完成后使用document.write(),这会覆盖文档
	<p>Hello</p>
	<button onclick="demo1()">按钮1</button>
	<br /> 2.寻找元素
	<br />
	<ul>
		<li>通过id找到HTML元素</li>
		<p id="pid">你好</p>
		<button onclick="demo2()">按钮2</button>
		<li>通过标签名找到HTML元素</li>
		<h1>你好</h1>
		<button onclick="demo3()">按钮3</button>
	</ul>
	<br /> 3.改变HTML内容
	<br />
	<ul>
		<li>使用属性:innerHTML</li>
	</ul>
	<br /> 4.改变HTML属性
	<br />
	<ul>
		<li>使用属性:attribute</li>
	</ul>
	<a id="aid" href="www.baidu.com">链接</a>
	<br />
	<button onclick="demo4()">按钮3</button>
	<br />
	<button onclick="demo5()">按钮4</button>
	<br />
	<img id="imgid" src="../images/20.jpg"></img>
</body>
</html>
